<template>
	<view class="body-bg">
		<view class="header">
			<view class="icon-view" @click="$utils.navigateBack(1)"><u-icon name="arrow-left" color="#fff" size="40"></u-icon></view>
			<view class="right-view">您当前是：<VipIcon :index="vipType" color="#fff"></VipIcon></view>
		</view>
		<view class="banner">
			<view class="h1">会员专属 DIY海报权益</view>
			<view class="h2">随意定制您的海报</view>
		</view>
		<view class="type-list">
			<text
				v-for="(item,index) in typeList"
				:key="index"
				:class="typeIndex==index?'cur':''"
				@click="typeClick(index)"
			>{{item.name}}</text>
		</view>
		<view class="content">
			<view class="title">尊享会员生活，解锁高级权益</view>
			<view class="list-view1">
				<view
					class="list"
					v-for="(item,index) in iconList1"
					:key="index"
				>
					<image :src="item.icon" mode="heightFix" class="list-img"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="list-view2">
				<view
					class="list"
					v-for="(item,index) in iconList2"
					:key="index"
					:class="index>lockMinNum?'list-lock':''"
				>
					<view class="icon-view">
						<u-icon :name="item.icon" size="55" color="#d2ac66"></u-icon>
						<u-icon name="lock-fill" size="30" color="#999" class="lock"></u-icon>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="btn-view" :style="{display:btnShow()?'':'none'}">
			<u-button type="warning" shape="circle" class="btn" @click="btnClick">立即升级{{typeList[typeIndex].name}}</u-button>
		</view>
	</view>
</template>		

<script>
import mixin from "@/libs/mixin.js";
import { getCardData } from '@/api/index.js'
export default {
	mixins: [mixin],
	data() {
		return {
			vipType: '',
			typeIndex: 0,
			typeList:[
				{icon:'/static/images/vip-icon1.png',name:'普通会员'},
				{icon:'/static/images/vip-icon2.png',name:'黄金会员'},
				{icon:'/static/images/vip-icon3.png',name:'超级会员'}
			],
			iconList1: [
				{icon:'/static/images/icon-renzheng.png',name:'官网认证'},
				{icon:'/static/images/icon-vip.png',name:'会员标示'},
				{icon:'/static/images/icon-kefu.png',name:'专属客服'}
			],
			lockMinNum: 1,
			iconList2: [
				{icon:'account-fill',name:'个人名称'},
				{icon:'phone-fill',name:'联系电话'},
				{icon:'home-fill',name:'公司名称'},
				{icon:'star-fill',name:'公司logo'},
				{icon:'attach',name:'官网链接'},
				{icon:'edit-pen-fill',name:'个性化签名'},
				{icon:'zhifubao',name:'支付宝二维码'},
				{icon:'weixin-fill',name:'微信二维码'},
				{icon:'weibo',name:'微博二维码'},
				{icon:'grid-fill',name:'抖音二维码'},
				{icon:'file-text-fill',name:'专属模板'}
			]
		}
	},
	onLoad() {
		this.getCardDataFun();
	},
	methods: {
		//获取会员数据
		getCardDataFun(){ 
			getCardData({token:this.$store.state.app.token}).then(res=>{ 
				this.vipType = res.list.vipType;
			}).catch(err=>{
				uni.showToast({
					title: err.msg,
					icon:'none'
				})
			});
		},
		// 会员类型tab点击
		typeClick(index){
			this.typeIndex = index;
			if( index==1 ){
				this.lockMinNum = 4;
			}else if( index==2 ){
				this.lockMinNum = 20;
			}else{
				this.lockMinNum = 1;
			}
		},
		// 会员按钮变化
		btnShow(){
			if( (this.vipType=="普通会员" || this.vipType=="黄金会员" || this.vipType=="超级会员") && this.typeIndex==0 ){
				return false
			}else if( (this.vipType=="黄金会员" || this.vipType=="超级会员") && this.typeIndex==1 ){
				return false
			}else if( this.vipType=="超级会员" && this.typeIndex==2 ){
				return false
			}else{
				return true
			}
		},
		// 按钮点击
		btnClick(){
			this.$utils.navigateTo('/vip/payment',{vipIndex:this.typeIndex});
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.body-bg{
	background: url(../../static/images/bd-info-bg.jpg) no-repeat top center;
	background-size: 100% auto;
}
.header{
	position:absolute;
	top:60rpx;
	left:0;
	z-index: 1;
	width:100%;
	padding:0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.icon-view{
		width:65rpx;
		height:65rpx;
		background: rgba(0,0,0,.2);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
	}
	.right-view{
		color:#fff;
		line-height: 1.3em;
		padding:15rpx 20rpx 0 0;
		vertical-align: middle;
	}
}
.banner{
	padding:180rpx 0 90rpx;
	text-align: center;
	color:#fff;
	font-size:35rpx;
	.h1{
		font-size:50rpx;
	}
	.h2{
		margin-top:10rpx;
		opacity: .8;
	}
}
.type-list{
	width:90%;
	margin:0 auto;
	display: flex;
	text-align: center;
	border-radius:20rpx 20rpx 0 0;
	overflow: hidden;
	text{
		width:33.3%;
		box-sizing: border-box;
		background: #1d6ef7;
		color:#fff;
		line-height: 80rpx;
		margin-right: 1px;
		&.cur{
			background:#ebf3ff;
			color:#1d6ef7;
			font-weight: bold;
		}
	}
}
.content{
	width:90%;
	background: #fff;
	border-radius: 0 0 20rpx 20rpx;
	padding:45rpx 30rpx 80rpx;
	margin:0 auto;
	.title{
		text-align: center;
		font-size:32rpx;
	}
	.list-view1,.list-view2{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
		margin-top:30rpx;
		.list{
			padding:18rpx 0;
			text{
				display: block;
				margin-top:10rpx;
			}
		}
	}
	.list-view1{
		font-size:28rpx;
		.list{
			width:33.3%;
			.list-img{
				height:85rpx;
			}
		}
	}
	.list-view2{
		font-size:24rpx;
		.list{
			width:25%;
			.icon-view{
				position: relative;
				background:rgb(252,242,217);
				border-radius: 50%;
				width:100rpx;
				height:100rpx;
				margin:0 auto;
				display:flex;
				justify-content:center;
				align-items:center;
				.lock{
					display: none;
					position:absolute;
					right:0rpx;
					bottom:5rpx;
				}
			}
			&.list-lock{
				filter: grayscale(100%);
				.lock{
					display: inline-block;
				}
			}
		}
	}
}
.btn-view{
	height:190rpx;
	.btn{
		position:fixed;
		left:4%;
		bottom:30rpx;
		z-index:10;
		width:92%;
		background:linear-gradient(to right,#eeb115,#c17306);
		color: #fff!important;
		border: none;
	}
}
</style>